<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.page.title}">Title</title>
    <script th:inline="javascript">
        var _userNameExit = 1002;
        var _MobileExit = 1003;
        var _EmailExit = 1004;
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/* -189 是去掉左侧 菜单的宽度， -12是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            _gridHeight = $(document).height()-65-67; /* -65 顶部主菜单高度， -67查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth - 75 -150) /4;
            $("#flexigrid-tabl-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/user/queryUserInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nice}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : 150, sortable : false,align : 'center',process: function(v,_trid,_row){
                            var contents = '';
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_mod')")}]]) {
                                var modifyBtn = /*[[#{common.modify}]]*/'';
                                //修改用户根据ID

                                contents += '<a  class="btn" title="' + modifyBtn + '" onclick="modifyUserInfo(\'' + v + '\')">';
                                contents += '<i class="glyphicon glyphicon-pencil"></i>';
                                contents += '</a>';
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_del')")}]]) {
                                //删除用户

                                var deleteBtn = /*[[#{common.delete}]]*/'';
                                contents += '<a  class="btn" title="' + deleteBtn + '" onclick="deleteUserInfo(\'' + v + '\')">';
                                contents += '<i class="glyphicon glyphicon-trash"></i>';
                                contents += '</a>';
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_role')")}]]) {
                                //用户分配角色
                                var assignRolesBtn = /*[[#{user.assign.roles}]]*/'';
                                contents += '<a  class="btn" title="' + assignRolesBtn + '" onclick="assignRolesInfo(\'' + v + '\')">';
                                contents += '<i class="glyphicon glyphicon-random"></i>';
                                contents += '</a>';
                                return contents;
                            }
                        }}
                ],
                resizable : false, //resizable table 是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起 ajax 请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击右键等
                rowbinddata : true
            });
            queryTable();
            //查询用户信息
            $("#query-user-btn-id").click(function () {
                queryTable();
            });
            //增加用户对话框
            $("#add-user-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.add.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            // $(this).dialog("close");
                            var flag= $("#add-user-form-id .form-control").verification();
                            if(!flag){
                                return;
                            }
                            var newPasswd =$("#add-new-password-id").val();
                            var confrimPasswd=$("#add-confirm-password-id").val();
                            if(newPasswd !== confrimPasswd){
                                $("#add-new-password-id").addClass("ui-state-error");
                                $("#add-new-password-id").focus();
                                return;
                            }
                            // message("增加用户成功")
                            $("#add-user-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //增加按钮事件
            $("#add-user-btn-id").click(function () {
                $("#add-user-dialog-id").dialog('open')
            });
            //增加用户form初始化
            $("#add-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    if (data.success){
                        $("#add-user-dialog-id").dialog('close')
                        $("#add-user-form-id").resetForm();
                        queryTable();
                    }else if (data.code === _userNameExit){
                        $("#add-user-name-id").addClass("ui-state-error");
                        $("#add-user-name-id").focus();
                    }else if (data.code === _EmailExit){
                        $("#add-email-id").addClass("ui-state-error");
                        $("#add-email-id").focus();
                    }else if (data.code === _MobileExit){
                        $("#add-mobile-id").addClass("ui-state-error");
                        $("#add-mobile-id").focus();
                    }

                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            //修改用户对话框
            $("#mod-user-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.mod.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            // var flag= $("#add-user-form-id .form-control").verification();
                            // if(!flag){
                            //     return;
                            // }
                            // var newPasswd =$("#add-new-password-id").val();
                            // var confrimPasswd=$("#add-confirm-password-id").val();
                            // if(newPasswd !== confrimPasswd){
                            //     $("#add-new-password-id").addClass("ui-state-error");
                            //     $("#add-new-password-id").focus();
                            //     return;
                            // }
                            // // message("增加用户成功")
                            // $("#add-user-form-id").submit();
                            var flag= $("#mod-user-form-id .form-control").verification();
                            if(!flag){
                                return;
                            }

                            $("#mod-user-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]

            });
            //修改用户ajaxForm
            $("#mod-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    if (data.success){
                        $("#mod-user-dialog-id").dialog('close')
                        $("#add-user-form-id").resetForm();
                        queryTable();
                    }else if (data.code === _userNameExit){
                        $("#mod-user-name-id").addClass("ui-state-error");
                        $("#mod-user-name-id").focus();
                    }else if (data.code === _EmailExit){
                        $("#mod-email-id").addClass("ui-state-error");
                        $("#mod-email-id").focus();
                    }else if (data.code === _MobileExit){
                        $("#mod-mobile-id").addClass("ui-state-error");
                        $("#mod-mobile-id").focus();
                    }

                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            //删除按钮事件
            $("#delete-user-btn-id").click(function () {
                var ids = $("#flexigrid-tabl-id").findFlexData(0);
                if (ids.length === 0){
                    message(/*[[#{common.select}]]*/'');
                    return;
                }
                $("#delete-user-confirm-dialog-id").attr("user-ids",ids);
                $("#delete-user-confirm-dialog-id").dialog('open');
            });
            //确认删除对话框
            $("#delete-user-confirm-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.del.user.confirm.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var ids = $("#delete-user-confirm-dialog-id").attr("user-ids");
                            // console.info(ids);
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/deleteUserInfoByIds}]]*/'',
                                data: [{name:"userUuids",value:ids}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#delete-user-confirm-dialog-id").dialog('close');
                                    queryTable();

                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }

                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]

            });
            //分配角色对话框
            $("#assign-roles-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{user.assign.roles.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            // $.ajax({
                            //     type: 'post',
                            //     async: false,
                            //     dataType : 'json',
                            //     url: /*[[@{/user/deleteUserInfoByIds}]]*/'',
                            //     data: [{name:"userUuids",value:ids}],
                            //     success: function (data) {
                            //         message(data.msg);
                            //         $("#delete-user-confirm-dialog-id").dialog('close');
                            //         queryTable();
                            //
                            //     },
                            //     error: function(msg){
                            //         message(/*[[#{common.error}]]*/'');
                            //     }
                            //
                            // });
                            var rolesArray = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("assign-roles-ztree-id");
                            var checkedNodes = ztreeObj.getCheckedNodes(true);
                            $(checkedNodes).each(function (index,item) {
                                rolesArray.push(item.id);
                            });

                            var userUuidArray = $("#assign-roles-dialog-id").attr("userUuidArray");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/saveRoleRefUser}]]*/'',
                                data: [
                                    {name:"userUuidArray",value:userUuidArray},
                                    {name:"rolesArray",value:rolesArray}
                                ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#assign-roles-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }

                            });


                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //批量分配角色
            $("#assign-role-btn-id").click(function () {
                batchAssignRole()
            });
            //用户详情
            $("#detail-user-dialog-id").dialog({
                autoOpen : false,
                width : 408,
                modal : true,
                resizable : false,
                title: /*[[#{user.detail.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //重置密码对话框
            $("#reset-password-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.reset.passwd.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag= $("#reset-password-dialog-id input.form-control").verification();
                            if(!flag){
                                return;
                            }
                            var newPasswd =$("#reset-new-password-id").val();
                            var confrimPasswd=$("#reset-confirm-password-id").val();
                            if(newPasswd !== confrimPasswd){
                                $("#reset-new-password-id").addClass("ui-state-error");
                                $("#reset-new-password-id").focus();
                                return;
                            }
                            var userUuidArray = $("#reset-password-dialog-id").attr("userUuidArray");
                            var password = $("#reset-new-password-id").val();
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/resetPassword}]]*/'',
                                data: [
                                    {name:"userUuidArray",value:userUuidArray},
                                    {name:"password",value:password}
                                ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#reset-password-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }

                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            //重置密码按钮
            $("#reset-passwd-btn-id").click(function () {
                var ids = $("#flexigrid-tabl-id").findFlexData(0);
                if (ids.length === 0){
                    message(/*[[#{common.select}]]*/'');
                    return;
                }
                $("#reset-password-dialog-id").attr("userUuidArray",ids);

                $("#reset-password-dialog-id").dialog("open");

            });
        });//ready
        function queryTable() {
            var userName = $("#search-user-name-id").val();
            var niceName = $("#search-nice-name-id").val();
            $("#flexigrid-tabl-id").flexOptions({
                extParam:[{name:"userName",value:userName},
                    {name:"niceName",value:niceName}
                    ]
            }).flexReload();
        }
        function modifyUserInfo(userUuid) {
            // alert(userUuid)
            $("#mod-user-uuid-id").val(userUuid);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/queryUserInfoById}]]*/'',
                data: [{name:"userUuid",value:userUuid}],
                success: function (data) {

                    $("#mod-user-name-id").val(data.userName);
                    $("#mod-email-id").val(data.email);
                    $("#mod-nice-name-id").val(data.niceName);
                    $("#mod-mobile-id").val(data.mobile);
                    $("#mod-user-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }

            });

        }
        //单条记录删除用户信息
        function deleteUserInfo(userUuid) {
            $("#delete-user-confirm-dialog-id").attr("user-ids",userUuid);
            $("#delete-user-confirm-dialog-id").dialog('open');
        }

        var assignSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true

                }
            }
        };
        //分配角色
        function assignRolesInfo(userUuid) {

            $("#assign-roles-dialog-id").attr("userUuidArray",userUuid);
            // var data=[
            //     {id:1,name:"角色管理",pId:"-1",checked:false,open:true},
            //     {id:2,name:"管理员",pId:"1",checked:false,open:true},
            //     {id:3,name:"开发人员",pId:"1",checked:false,open:true},
            // ];
            // $.fn.zTree.init($("#assign-roles-ztree-id"), assignSetting, data);
            // $("#assign-roles-dialog-id").dialog('open');

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/queryRoleZtreeByUserId}]]*/'',
                data: [{name:"userUuid",value:userUuid}],
                success: function (data) {
                    $.fn.zTree.init($("#assign-roles-ztree-id"), assignSetting, data);
                    $("#assign-roles-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }

            });
        }

        //批量分配角色
        function batchAssignRole() {
            var ids = $("#flexigrid-tabl-id").findFlexData(0);
            if (ids.length === 0){
                message(/*[[#{common.select}]]*/'');
                return;
            }
            $("#assign-roles-dialog-id").attr("userUuidArray",ids);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/queryRoleZtreeAll}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#assign-roles-ztree-id"), assignSetting, data);
                    $("#assign-roles-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }



            });

        }
        //用户详情
        function rowDbclick(r) {
            $(r).dblclick(function () {
                var columnArray = $(r).attr('ch').split("_FG$SP_");
                console.log("kkk")
                $("#det-user-uuid-id").text(columnArray[0]);
                $("#det-user-name-id").text(columnArray[1]);
                $("#det-email-id").text(columnArray[2]);
                $("#det-nice-name-id").text(columnArray[4]);
                $("#det-mobile-id").text(columnArray[3]);
                $("#detail-user-dialog-id").dialog("open");
            });

        }
    </script>
    <style>
        .tr{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 5px 0;
        }
    </style>
</head>
<body>

<nav>
    <span sec:authorize="hasRole('ROLE_cldk_data_user_query')"  th:text="#{user.name}"></span>
    <input sec:authorize="hasRole('ROLE_cldk_data_user_query')" type="text" id="search-user-name-id">
    <span sec:authorize="hasRole('ROLE_cldk_data_user_query')" th:text="#{user.nice}"></span>
    <input sec:authorize="hasRole('ROLE_cldk_data_user_query')" type="text" id="search-nice-name-id">
    <a sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="query-user-btn-id" class="btn">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_user_add')" id="add-user-btn-id" class="btn">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <span th:text="#{common.add}"></span>
    </a>
<!--    <a  class="btn">-->
<!--        <i class="glyphicon glyphicon-pencil"></i>-->
<!--        <span th:text="#{common.modify}"></span>-->
    <a  sec:authorize="hasRole('ROLE_cldk_data_user_del')" id="delete-user-btn-id" class="btn">
        <i class="glyphicon glyphicon-trash"></i>
        <span th:text="#{common.delete}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_user_role')" id="assign-role-btn-id" class="btn">
        <i class="glyphicon glyphicon-random"></i>
        <span th:text="#{user.assign.roles}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_user_setpwd')" id="reset-passwd-btn-id" class="btn">
        <i class="glyphicon glyphicon-refresh"></i>
        <span th:text="#{user.reset.password}"></span>
    </a>
</nav>
<table sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="flexigrid-tabl-id"></table>
<div id="add-user-dialog-id" style="display: none">
    <form id="add-user-form-id" method="post" th:action="@{/user/addUser}">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span><span style="color: red">*</span>
            <input id="add-user-name-id" class="form-control" type="text" name="userName" pattern="^[a-z,A-Z,0-9]{1,20}$" th:title="#{login.userName.tip}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modp.new.password}"></span><span style="color: red">*</span>
            <input class="form-control" type="password" name="password" id="add-new-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$"  th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modp.confirm.password}"></span><span style="color: red">*</span>
            <input class="form-control" type="password" id="add-confirm-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span><span style="color: red">*</span>
            <input id="add-email-id" class="form-control" type="email" name="email" pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$" >
        </div>
        <div class="form-group">
            <span th:text="#{user.nice}"></span>
            <input class="form-control" type="text" name="niceName" pattern="^[一-龥,0-9]{0,10}$" th:title="#{user.nice.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input id="add-mobile-id" class="form-control" type="number" name="mobile" pattern="^([0-9]{0}|([0-9]{11}))$" th:title="#{login.mobile.tip}">
        </div>
    </form>

</div>


<div id="mod-user-dialog-id" style="display: none">
    <form id="mod-user-form-id" method="post" th:action="@{/user/modifyUser}">
        <input type="hidden" name="userUuid" id="mod-user-uuid-id">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span><span style="color: red">*</span>
            <input id="mod-user-name-id" class="form-control" type="text" name="userName" pattern="^[a-z,A-Z,0-9]{1,20}$" th:title="#{login.userName.tip}">
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span><span style="color: red">*</span>
            <input id="mod-email-id" class="form-control" type="email" name="email" pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$" >
        </div>
        <div class="form-group">
            <span th:text="#{user.nice}"></span>
            <input id="mod-nice-name-id" class="form-control" type="text" name="niceName" pattern="^[一-龥,0-9]{0,10}$" th:title="#{user.nice.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input id="mod-mobile-id" class="form-control" type="number" name="mobile" pattern="^([0-9]{0}|([0-9]{11}))$" th:title="#{login.mobile.tip}">
        </div>


    </form>
</div>
<div id="delete-user-confirm-dialog-id" style="display: none">

</div>
<div id="assign-roles-dialog-id" style="display: none">
    <ul id="assign-roles-ztree-id" class="ztree">
    </ul>
</div>
<div id="detail-user-dialog-id" style="display: none">

    <div class="tr">
        <span class="td-left" th:text="#{login.user.name}"></span>
        <span class="td-right" id="det-user-uuid-id" ></span>
    </div>
    <div class="tr">
        <span class="td-left" th:text="#{login.user.name}"></span>
        <span class="td-right" id="det-user-name-id" ></span>
    </div>
    <div class="tr">
        <span class="td-left" th:text="#{user.email}"></span>
        <span class="td-right" id="det-email-id"></span>

    </div>
    <div class="tr">
        <span class="td-left" th:text="#{user.nice}"></span>
        <span class="td-right" id="det-nice-name-id"></span>
    </div>
    <div class="tr">
        <span class="td-left" th:text="#{user.mobile}"></span>
        <span class="td-right" id="det-mobile-id"></span>
    </div>
</div>
<div id="reset-password-dialog-id" style="display: none">
    <div class="form-group">
        <span th:text="#{main.modp.new.password}"></span>
        <input class="form-control" type="password" name="newPassword" id="reset-new-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$"  th:title="#{main.password.pattern}">
    </div>
    <div class="form-group">
        <span th:text="#{main.modp.confirm.password}"></span>
        <input class="form-control" type="password" id="reset-confirm-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
    </div>
</div>
</body>
</html>